<template>
    <BaseTable :columns="columns" :data="list" max-height="300px" highlight-current-row empty-text="请选择缺陷进行关联">
        <template #stake="{ scope: { row } }">
            <!-- 桩号 -->
            <div v-if="row.locationType === 2">
                <span>{{ row.stake }}</span>
            </div>
            <!-- 设备 -->
            <div v-if="row.locationType === 1">
                <span>{{ row.facilitiesName }}</span>
            </div>
            <!-- 桩号范围 -->
            <div v-if="row.locationType === 3">
                <span>{{ `K${row.startStake1}+${row.startStake2}~K${row.endStake1}+${row.endStake2}` }}</span>
            </div>
        </template>
        <template #quantity="{ scope: { row } }">
            <span>{{ row.quantity }}{{ row.unit }}</span>
        </template>
        <template #handle="{ scope: { $index } }">
            <BaseButton type="text" color="danger" @click="handleDelete($index)">删除</BaseButton>
        </template>
    </BaseTable>
</template>

<script>
import reconfirm from '@/utils/reconfirm'

export default {
    name: 'DefectTable',
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            columns: Object.freeze([
                {
                    attrs: {
                        label: '巡查日期',
                        prop: 'inspectDate',
                        width: '130',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '问题描述',
                        prop: 'abnormalDescription',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    attrs: {
                        label: '公路名称',
                        'show-overflow-tooltip': true,
                        prop: 'highwayName',
                        'min-width': '120'
                    }
                },
                {
                    attrs: {
                        label: '位置/桩号',
                        prop: 'location',
                        'show-overflow-tooltip': true,
                        'min-width': '100'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        'min-width': '140'
                    }
                }
            ])
        }
    },
    methods: {
        // 前端删除赔付项目列表
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => this.deleteCard(index)
            })
        },
        deleteCard(index) {
            const list = JSON.parse(JSON.stringify(this.list))
            list.splice(index, 1)
            this.$emit('update:list', list)
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
